<template>
  <div class="contarner-page" @click.stop="showLanguageHandel">
    <page-header ref="languageRef"></page-header>
    <main>
      <div class="downloader flex_ccenter" v-if="!success">
        <div class="container">
          <div class="banner-heading flex_ccenter">
            <div class="heading-item">
              <h1 class="title fw700 f-42 c-fff">Instagram Photo Downloader</h1>
              <h2 class="sub c-fff f-18 fw400">
                Download photo from Instagram
              </h2>
            </div>
          </div>
          <div class="form flex_center">
            <div class="input-box flex_between">
              <!-- <input
                  type="text"
                  class="input f-18"
                  v-model="input"
                  @input="handleInput"
                  @paste="handleInput"
                  placeholder="Paste URL Instagram"
                  list="fruits"
                  name="fruit"
                />
                <datalist id="fruits">
                  <option value="Apple"></option>
                  <option value="Banana"></option>
                  <option value="Cherry"></option>
                </datalist> -->
              <input
                type="text"
                class="input f-18"
                v-model="input"
                :disabled="isHttpLoading"
                @input="handleInput"
                @paste="handleInput"
                @keydown="sendDownload($event)"
                placeholder="Paste URL Instagram"
              />
              <div
                class="Paste shou flex_center"
                @click="handleClickPasted"
                v-if="input == ''"
              >
                <div class="btnbg"></div>
                <div class="f-16 c-000 fw700">Paste</div>
              </div>
              <div
                class="clear shou flex_center"
                v-if="input != '' && !isHttpLoading"
                @click.stop="input = ''"
              >
                <div class="btnbg"></div>
                <div class="f-16 c-000 fw700">Clear</div>
              </div>
            </div>
            <div
              v-if="!isHttpLoading"
              @click.stop="downloadHandel"
              class="submit shou fw700 c-fff flex_center"
            >
              Download
            </div>
            <div v-else class="submit shou fw700 c-fff flex_center">
              Please wait
            </div>
          </div>
          <div class="app-submit flex_ccenter">
            <div
              class="submit flex_center"
              v-if="!isHttpLoading"
              @click.stop="downloadHandel"
            >
              <div class="fw700 c-fff f-21">Download</div>
            </div>
            <div class="submit flex_center" v-else>
              <div class="fw700 c-fff f-21">Please wait</div>
            </div>
          </div>
          <div class="loading" v-if="isHttpLoading">
            <div class="loading-dots flex_center">
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
            <div class="tips f-18 flex_center">
              <div>Retrieving data, please wait a few seconds!</div>
            </div>
          </div>
          <div class="error flex_ccenter" v-if="httpError1">
            <div class="hono flex_">
              <div class="error-img"></div>
              <div class="error-img"></div>
              <div class="error-img"></div>
            </div>
            <div class="errMsg f-18">
              The site can not process your link because it is private
            </div>
          </div>
          <div class="error flex_ccenter" v-if="httpError2">
            <div class="hono flex_">
              <div class="error-img"></div>
              <div class="error-img"></div>
              <div class="error-img"></div>
            </div>
            <div class="errMsg f-18">
              The data you entered is not a link. Please enter a valid link, for
              example:
              <div>https://www.instagram.com/reel/Cml9qu-ISqx</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 广告位start -->
      <!-- 广告位end -->
      <div class="container" v-if="!success">
        <div class="body-content">
          <div class="app-box">
            <div class="app-box__info">
              <h3 class="app-box__title f-21 fw700 c-000">
                Download with app Insta Downloader
              </h3>
              <p class="f-16 c-ccc">
                Our app offers a quick and simple solution for downloading Instagram videos, providing HD quality videos without watermarks.
              </p>
            </div>
            <div class="app-link">
              <a 
                  target="_blank" href="https://play.google.com/store/apps/details?id=ins.freevideodownload.pro">
                <img src="/static/images/google-play.webp" alt="Download app " />
              </a>
              <a href="https://apps.apple.com/us/app/repost-for-video-save-story/id6462401460"  target="_blank">
                <img src="/static/images/IOS.webp" alt="Download app " />
              </a>
            </div>
          </div>
          <div class="quick-info">
            <h3 class="f-32 c-000">
              Instagram Photo Download with Savinginsta
            </h3>
            <p class="f-16 c-ccc">
              With thousands of posts and hundreds of thousands of likes on
              Instagram daily, many Instagrammers wish to save these posts to
              their personal computers. Savinginsta's Instagram photo downloader
              is here to meet this need, helping you save Instagram photos
              easily. It's simple to use and allows for unlimited downloads.
              Whatever posts you like on Instagram, Savinginsta can assist you
              in downloading them.
            </p>
            <p class="f-16 c-ccc">
              Savinginsta is an Instagram (IG) photo downloader that simplifies
              saving images from Instagram. It's completely free and safe. No
              software installation is required on your computer or mobile
              phone; all you need is an Instagram photo link. The processing is
              done on our side, so you're just a click away from downloading
              images to your devices.
            </p>
          </div>
          <div class="how">
            <div class="how-title">
              <h3 class="f-36 c-000 italic">
                How to Save (Download) Instagram Photos Using Savinginsta?
              </h3>
            </div>
            <div class="steps">
              <p class="super f-16 fw700">
                It's incredibly easy. Here's a detailed guide:
              </p>
              <div class="step">
                <div class="one">
                  <span class="fw700 c-blue f-16">Step01:</span>
                  <span class="f-16 c-000"
                    >Find the Instagram post with your favorite image and get
                    the link.</span
                  >
                </div>
              </div>
              <div class="step">
                <span class="fw700 c-blue f-16">Step02:</span>
                <span class="f-16 c-000"
                  >Go to the Savinginsta page and paste the link in the
                  toolbar.</span
                >
              </div>
              <div class="step">
                <span class="fw700 c-blue f-16">Step03:</span>
                <span class="f-16 c-000"
                  >Click the Download button to save the photo to your personal
                  device.</span
                >
              </div>
            </div>
          </div>
          <div class="how">
            <div class="how-title">
              <h3 class="f-36 c-000 italic">
                How to Instagram (Insta) Photo Download in iPhone
              </h3>
              <div class="note c-ccc f-16">
                Note: Instagram Photo Download only works if your iPhone is 6s
                (6s Plus) or later.
              </div>
            </div>
            <div class="steps">
              <div class="step">
                <div class="one">
                  <span class="fw700 c-blue f-16">Step01:</span>
                  <span class="f-16 c-000"
                    >Open Instagram on your iPhone, select the Instagram photo
                    post you want to save, and copy the photo URL by clicking
                    the 3 dots above the post.
                  </span>
                </div>
              </div>
              <div class="photo-bg">
                <img
                  class="img"
                  src="/static/images/instagram-photo-download.webp"
                  alt="copy the Instagram photo URL and paste"
                />
              </div>
              <div class="step">
                <span class="fw700 c-blue f-16">Step02:</span>
                <span class="f-16 c-000"
                  >Open Instagram Photo Downloader with Safari and paste the
                  photo URL in the toolbar.</span
                >
              </div>
              <div class="step">
                <span class="fw700 c-blue f-16">Step03:</span>
                <span class="f-16 c-000"
                  >Click Download, then select a server to start saving the
                  Instagram photo.</span
                >
              </div>
            </div>
            <div class="user-note f-16">
              <div class="app-tip"></div>
              <p>
                Our tool is designed to help you download videos and images
                uploaded by your own account. We reserve the right to refuse
                service if our tools are used to infringe upon others' privacy
                and material.
              </p>

              <a class="fw700 c-blue" href="/terms-of-service"
                >Read our full Terms of Service here.</a
              >
            </div>
          </div>
          <div class="faq-section">
            <h3 class="faq-title f-36 c-000 italic">FAQ</h3>
            <div class="accordion">
              <div
                id="faq"
                itemscope="itemscope"
                itemtype="https://schema.org/FAQPage"
              >
                <div
                  itemprop="mainEntity"
                  itemscope="itemscope"
                  itemtype="https://schema.org/Question"
                  class="accordion-item"
                  :key="k"
                  v-for="(item, k) in faqList"
                >
                  <h4 itemprop="name" class="accordion-title fw700 f-16">
                    {{ item.title }}
                  </h4>
                  <div
                    itemprop="acceptedAnswer"
                    itemscope=""
                    itemtype="https://schema.org/Answer"
                  >
                    <div
                      itemprop="text"
                      class="accordion-text f-16 c-ccc fw400"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 解析结果 start -->
      <div class="container" v-if="success">
        <success-content
          @refresh="refresh"
          :list="successList"
        ></success-content>
      </div>
      <!-- 解析结果 end -->
    </main>
    <footer>
      <div class="container">
        <div class="footer-content">
          <div class="footer-link">
            <div class="row flex_between">
              <div class="col-12">
                <div class="link-label fw700 c-000 f-21">Tools</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/instagram-story-download" 
                      >Instagram Story Downloader</nuxt-link
                    >
                  </li>
                  <li>
                    <nuxt-link to="/instagram-reels-video-download" 
                      >Instagram Reels Downloader</nuxt-link
                    >
                  </li>
                  <li>
                    <a href="https://savingtik.com/" target="_blank"
                      >Tiktok Downloader</a
                    >
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">Support</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/contact"> Contact </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/blog"> Blog </nuxt-link>
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">Legal</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/terms-of-service">
                      Terms of Service
                    </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/privacy-policy"> Privacy Policy </nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="copyright flex_ccenter">
            <b class="fw700 f-21 c-000"
              >We are not affiliated with Instagram or Meta</b
            >
            <div class="c-ccc f-16">
               
                © {{new Date().getFullYear()}} Insta Downloader All rights reserved. 
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
  
  <script>
import { mapState, mapGetters, mapMutations } from "vuex";
import pageHeader from "~/components/page-header.vue";
import SuccessContent from "~/components/success-content.vue";
import CryptoJS from "crypto-js";
import { handleClick, checkString } from "@/plugins/Firebase.js";

export default {
  components: { pageHeader, SuccessContent },
  head: {
    htmlAttrs: {
      lang: "en",
    },
    bodyAttrs: {
      "data-lang": "en",
    },
    title:
      "Instagram Photo Downloader - Instagram Photo Download with Savinginsta",
    meta: [
      { property: "og:locale", content: "en" },

      //Page Information
      {
        name: "description",
        content:
          "Instagram Photo Downloader that allows you to download high quality photo online. With Savinginsta Instagram Photo Download tool, you can download the photos fastly.No watermarks.",
      },
      //Schema.org Microdata
      {
        itemprop: "name",
        content:
          "Instagram Photo Downloader - Instagram Photo Download with Savinginsta",
      },
      // Facebook / OpenGraph
      {
        property: "og:title",
        content:
          "Instagram Photo Downloader - Instagram Photo Download with Savinginsta",
      },
      { property: "og:type", content: "website" },
      {
        property: "og:url",
        content: "https://savinginsta.com/instagram-photo-download",
      },

      {
        property: "og:description",
        content:
          "Instagram Photo Downloader that allows you to download high quality photo online. With Savinginsta Instagram Photo Download tool, you can download the photos fastly.No watermarks.",
      },
      //Twitter
      { name: "twitter:card", content: "summary" },
      {
        name: "twitter:url",
        content: "https://savinginsta.com/instagram-photo-download",
      },
      {
        name: "twitter:title",
        content:
          "Instagram Photo Downloader - Instagram Photo Download with Savinginsta",
      },
      {
        name: "twitter:description",
        content:
          "Instagram Photo Downloader that allows you to download high quality photo online. With Savinginsta Instagram Photo Download tool, you can download the photos fastly.No watermarks.",
      },
      //multilingual
      {
        name: "google",
        content: "notranslate",
      },
    ],
    link: [
      //multilingual
      {
        rel: "alternate",
        hreflang: "x-default",
        href: "https://savinginsta.com/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "en",
        href: "https://savinginsta.com/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "en-in",
        href: "https://savinginsta.com/in/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "vi",
        href: "https://savinginsta.com/vn/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "tr",
        href: "https://savinginsta.com/tr/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "id",
        href: "https://savinginsta.com/id/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "fr",
        href: "https://savinginsta.com/fr/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "pt",
        href: "https://savinginsta.com/pt/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "ru",
        href: "https://savinginsta.com/ru/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "es",
        href: "https://savinginsta.com/es/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "ms",
        href: "https://savinginsta.com/ms/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "ko",
        href: "https://savinginsta.com/ko/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "ja",
        href: "https://savinginsta.com/ja/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "jv",
        href: "https://savinginsta.com/jv/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "cs",
        href: "https://savinginsta.com/cs/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "de",
        href: "https://savinginsta.com/de/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "it",
        href: "https://savinginsta.com/it/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "pl",
        href: "https://savinginsta.com/pl/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "hu",
        href: "https://savinginsta.com/hu/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "nl",
        href: "https://savinginsta.com/nl/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "ro",
        href: "https://savinginsta.com/ro/instagram-photo-download",
      },
      {
        rel: "alternate",
        hreflang: "el",
        href: "https://savinginsta.com/el/instagram-photo-download",
      },
      {
        rel: "canonical",
        href: "https://savinginsta.com/instagram-photo-download",
      },
    ],
    script: [
      {
        json: {
          "@context": "http://schema.org",
          "@graph": [
            {
              "@type": "WebSite",
              name: "Savinginsta",
              alternateName: "Instagram downloader", 
              url: "https://savinginsta.com",
            },
            {
              "@type": "WebPage",
              name: "Instagram Photo Downloader - Instagram Photo Download with Savinginsta",
              inLanguage: "en",
              description:
                "Instagram Photo Downloader that allows you to download high quality photo online. With Savinginsta Instagram Photo Download tool, you can download the photos fastly.No watermarks.",
              image: "https://savinginsta.com/static/images/savinginsta_thumbnail.jpg", //绝对路径
              url: "https://savinginsta.com/instagram-photo-download",
            },
          ],
        },
        type: "application/ld+json"
      },
    ],
  },
  data() {
    return {
      input: "",
      success: false,
      isHttpLoading: false,
      httpError1: false,
      httpError2: false,
      current: 0,
      successList: [],
      faqList: [
        {
          title: `What is Instagram photo downloader?`,
          content: `It's a tool that supports downloading any Instagram photos, posts to your personal device. You can save Insta photos to PC, Mac, Android, iOS, and iPhone.`,
        },
        {
          title: `Can I download Instagram Private Photos?`,
          content: `No, Savinginsta only supports saving Instagram photos from Public accounts.`,
        },
        {
          title: `Do I need to Login when saving Instagram photos?`,
          content: `No, you don't need to log in to your account. Our IG photo downloader is very safe.`,
        },
        {
          title: `Does the website support Insta photo download to computers?`,
          content: `Yes, you can easily download videos and photos to your computer. See also: Download from Insta on PC.`,
        },
        {
          title: `Can you download Insta photo for Android?`,
          content: `Yes, just copy the link of the post and paste it into the box on our website, then save it. For more information: Download from Insta on Android.`,
        },
        {
          title: `Where is my IG photo download saved after downloading?`,
          content: `Videos are usually saved in the "Downloads" folder on Android Mobile and PC.`,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["language"]),
  },
  mounted() {
    this.debouncedDownInput = this.debounce(this.downInput, 1000);
  },
  methods: {
    async downloadHandel() {
      if (this.isHttpLoading || this.input === "") return;
      this.isHttpLoading = false;
      this.httpError1 = false;
      this.httpError2 = false;
      this.input = this.input.replace(/^.*\s?https:\/\//, "https://");
      let type = checkString(this.input);

      const insUrlPattern = new RegExp("^http(s|)://.*instagram.com.*/.*$");
      if (!insUrlPattern.test(this.input)) {
        //点击解析下载按钮
        handleClick("action_ins_detect_boinsom", {
          site: "other",
          noislink: this.input,
          from: "photo",
          type: type,
        });
        this.httpError2 = true;
        this.isHttpLoading = false;
        return;
      }
      //点击解析下载按钮
      handleClick("action_ins_detect_boinsom", {
        site: "other",
        from: "photo",
        type: type,
      });
      //开始解析  ins_start_resolve
      handleClick("ins_start_resolve", {
        islink: this.input,
        from: "photo",
        type: type,
      });
      this.isHttpLoading = true;
      try {
        let result = this.uki(this.input);
        const response = await fetch(
          "https://savinginsta.com/api/downloader/analysis",
          {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              path: result,
            }),
          }
        );
        let encryptedResponse = await response.text();
        let parse = JSON.parse(encryptedResponse);
        if (parse.code != 200) {
          // 解析失败  ins_resolve_fail
          handleClick("ins_resolve_fail", {
            reason: "Failed to fetch",
            islink: this.input,
            from: "photo",
            type: type,
          });
          this.httpError1 = true;
          this.isHttpLoading = false;
          return;
        } else {
          let decryptedResponse = await this.eki(parse.data); // 使用你的解密函数
          this.successList = JSON.parse(decryptedResponse);
          this.success = true;
          this.isHttpLoading = false;
          //解析成功  ins_resolve_success
          handleClick("ins_resolve_success", {
            type: type,
            from: "photo",
          });
        }
      } catch (error) {
        // 解析失败  ins_resolve_fail
        handleClick("ins_resolve_fail", {
          reason: "Failed to fetch",
          islink: this.input,
          from: "photo",
          type: type,
        });
        console.error(error);
        this.httpError1 = true;
        this.isHttpLoading = false;
      }
    },

    uki(input) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
       
      
  try {
        const complexKey = [
          process.env.part1,
          process.env.part2,
          process.env.part3,
          process.env.part4,
          process.env.part5,
          process.env.part6,
          process.env.part7,
          process.env.part8,
        ].join("");
        const keyBytes = CryptoJS.enc.Utf8.parse(complexKey);
        const inputBytes = CryptoJS.enc.Utf8.parse(input);
        const ivBytes = CryptoJS.lib.WordArray.random(IV_SIZE);
        const encrypted = CryptoJS.DES.encrypt(inputBytes, keyBytes, {
          iv: ivBytes,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        });
        const ciphertext = ivBytes.concat(encrypted.ciphertext);
        return ciphertext.toString();
      } catch (error) {
        console.error(error);
        return null;
      }
    },
    eki(cipherText) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
       
      const complexKey = [
          process.env.part1,
          process.env.part2,
          process.env.part3,
          process.env.part4,
          process.env.part5,
          process.env.part6,
          process.env.part7,
          process.env.part8,
        ].join("");
      try {
        let keyBytes = CryptoJS.enc.Utf8.parse(
          complexKey.padEnd(CIPHER_ALGORITHM === "DES-CBC" ? 8 : 16)
        );
        let ivBytes = { iv: CryptoJS.enc.Hex.parse(process.env.DES_IV) }; // 如果使用CBC模式，需要一个初始化向量iv，这里是空向量
        let decrypted = CryptoJS.DES.decrypt(
          { ciphertext: CryptoJS.enc.Hex.parse(cipherText) },
          keyBytes,
          ivBytes
        );
        return decrypted.toString(CryptoJS.enc.Utf8);
      } catch (e) {
        console.error(e);
        return null;
      }
    },
    sendDownload(event) {
      if (event.keyCode === 13 && !this.isHttpLoading) {
        this.downloadHandel();
        event.preventDefault();
        return false;
      }
    },
    changeTab(k) {
      this.current = k;
    },
    handleInput(e) {
      this.debouncedDownInput(e);
    },
    debounce(fn, delay) {
      let timer;
      return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(context, args);
        }, delay);
      };
    },
    downInput(e) {
      let type = checkString(e.target.value);
      // 粘贴链接到输入框 action_ins_paste
      handleClick("action_ins_paste", {
        islink: e.target.value,
        from: "video",
        type: type,
      });
    },
    handleClickPasted() {
      if (!navigator.clipboard) {
        console.log("Clipboard API not available");
        return;
      }
      navigator.clipboard
        .readText()
        .then((text) => {
          this.input = text;
          let type = checkString(text);
          // 粘贴链接到输入框 action_ins_paste
          handleClick("action_ins_paste", {
            islink: text,
            from: "video",
            type: type,
          });
        })
        .catch((err) => {
          console.error("Failed to read clipboard contents: ", err);
        });
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    refresh() {
      this.success = false;
      this.input = "";
      this.successList = [];
    },
  },
};
</script>
  <style lang="scss" scoped>
 @import "@/static/style/photo.css";
.loading {
  .loading-dots {
    position: relative;
    z-index: 999;
    margin-top: 70px;
  }

  .dot {
    background-color: #ffffff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 10px;
    animation: loading-animation 1.5s infinite;
  }

  .dot:nth-child(2) {
    animation-delay: 0.5s;
  }

  .dot:nth-child(3) {
    animation-delay: 0.8s;
  }
  .dot:nth-child(4) {
    animation-delay: 1s;
  }
}
@keyframes loading-animation {
  0%,
  50%,
  80%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5);
  }
}
@media (max-width: 768px) {
  .loading {
    .loading-dots {
      margin-top: 26px !important;
    }
    .dot {
      width: 8px !important;
      height: 8px !important;
    }
  }
}
</style>
  